import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
    Grid, Col, Row, Navbar, Nav, NavItem,
    NavDropdown, MenuItem, FormGroup, FormControl,
    Button, Breadcrumb, Tab
} from 'react-bootstrap';

export default class Home extends React.Component<any, any> {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Grid className='main'>
                <Row className="row1">
                    <Col xs={12} md={12} className='top-nav-col'>
                        <div className='top-nav'>

                            <Navbar inverse collapseOnSelect >
                                <Navbar.Header>
                                    <Navbar.Brand>
                                        <a href="#"><img className='logo' src='./images/icon/logo.png' /></a>
                                    </Navbar.Brand>
                                    <Navbar.Toggle />
                                </Navbar.Header>
                                <Navbar.Collapse>
                                    <Nav>
                                        <NavItem eventKey={1} href="#">Home</NavItem>
                                        <NavItem eventKey={2} href="#">C/C++</NavItem>
                                        <NavDropdown eventKey={3} title="Android" id="basic-nav-dropdown">
                                            <MenuItem eventKey={3.1}>Apps</MenuItem>
                                            <MenuItem eventKey={3.2}>Framework</MenuItem>
                                            <MenuItem eventKey={3.3}>JNI</MenuItem>
                                            <MenuItem eventKey={3.3}>AIDL</MenuItem>
                                        </NavDropdown>
                                        <NavItem eventKey={4} href="#">ReactJs</NavItem>
                                        <NavItem eventKey={5} href="#">Electron</NavItem>
                                        <NavItem eventKey={6} href="#">Javascript</NavItem>
                                    </Nav>
                                    <Nav pullRight>
                                        <NavItem eventKey={1} href="#">Contact</NavItem>
                                        <NavItem eventKey={2} href="#">Login</NavItem>
                                    </Nav>
                                    <Navbar.Form pullRight>
                                        <FormGroup>
                                            <FormControl type="text" placeholder="" />
                                        </FormGroup>
                                        {' '}
                                        <Button type="submit">Search</Button>
                                    </Navbar.Form>
                                </Navbar.Collapse>
                            </Navbar>
                        </div>
                    </Col>
                </Row>
                <Row className="row2">
                    <Col xs={12} md={12} className='content-col'>
                        <Tab.Container id='tabs' defaultActiveKey="first">
                            <Row >
                                <Col sm={3}>
                                    <Nav bsStyle="pills" stacked>
                                        <NavItem eventKey="first">
                                            Tab 1
                                        </NavItem>
                                        <NavItem eventKey="second">
                                            Tab 2
                                        </NavItem>
                                    </Nav>
                                </Col>
                                <Col sm={9}>
                                    <Tab.Content animation>
                                        <Tab.Pane eventKey="first">
                                            Tab 1 content
                                        </Tab.Pane>
                                        <Tab.Pane eventKey="second">
                                            Tab 2 content
                                        </Tab.Pane>
                                    </Tab.Content>
                                </Col>
                            </Row>
                        </Tab.Container>
                    </Col>
                </Row>
            </Grid>
        );
    }
}